<template>
  <div class="homework">
    <div class="homework-head">
      <h3>共{{ homeWork.length }}个活动</h3>
      <div class="add-homework" v-if="role==='teacher'">
        <el-button type="success" @click="addHomeWork()"><i class="el-icon-tianjia" style="margin-right: 5px;"></i>添加作业
        </el-button>
      </div>
    </div>
    <el-dialog title="添加作业" v-dialog-drag
               :visible.sync="addHomeWorkVisible" :close-on-click-modal="false"
               style="text-align: left">
      <el-form :model="addHomeWorkForm" ref="addHomeWorkForm" :rules="addHomeWorkRules" class="demo-ruleForm">
        <el-form-item label="作业类型" :label-width="formLabelWidth" prop="workType"
                      class="is-required" style="margin-bottom: 0;">
          <div class="workType">
            <!--            <span style="margin-right: 8px;">作业类型</span>-->
            <el-radio-group v-model="addHomeWorkForm.workType" class="is-required">
              <el-radio :label="'个人作业'">个人作业</el-radio>
              <el-radio :label="'小组作业'">小组作业</el-radio>
              <el-radio :label="'评审型作业'" :disabled="true">评审型作业<i class="el-icon-vip-copy vip-type"></i>
                <el-tooltip class="item" effect="dark" content="本作业类型支持按照评分点批阅、分配教学团队成员批阅"
                            placement="top">
                  <i class="el-icon-wenhao" style="cursor:pointer; font-size: 23px;"></i>
                </el-tooltip>
              </el-radio>
            </el-radio-group>
          </div>
        </el-form-item>
        <el-form-item label="作业标题" :label-width="formLabelWidth" prop="workTitle"
                      :rules="addHomeWorkRules.workTitle" class="is-required" style="font-weight: 600;">
          <el-input v-model="addHomeWorkForm.workTitle" autocomplete="off" id="workName" maxlength="70"
                    placeholder="作业标题"
                    show-word-limit></el-input>
        </el-form-item>
        <div style="border: 1px solid #ccc;">
          <Toolbar
              style="border-bottom: 1px solid #ccc"
              :editor="editor"
              :defaultConfig="toolbarConfig"
              :mode="mode"
          />
          <Editor
              style="height: 200px; overflow-y: hidden;"
              v-model="html"
              :defaultConfig="editorConfig"
              :mode="mode"
              @onCreated="onCreated"
          />
        </div>
        <div class="activity">
          <div class="active">
            <div class="label">活动类型标签</div>
            <el-input v-model="addHomeWorkForm.activity" autocomplete="off" id="activity" maxlength="10"
                      show-word-limit
                      placeholder="请输入活动名称标签">
            </el-input>
            <i class="el-icon-wenhao tip"></i>
          </div>
          <!--          <el-form-item label="活动类型标签" :label-width="formLabelWidth1" prop="activityType"-->
          <!--                        :rules="addHomeWorkRules.activity">-->
          <!--            <el-input v-model="addHomeWorkForm.activity" autocomplete="off" id="activity" maxlength="10"-->
          <!--                      show-word-limit-->
          <!--                      placeholder="请输入活动名称标签">-->
          <!--            </el-input>-->
          <!--            <i class="el-icon-wenhao"></i>-->
          <!--          </el-form-item>-->
          <el-form-item label="知识共享协议" :label-width="formLabelWidth1" prop="activityType"
                        style="margin-bottom: 0;">
            <!--            <el-select v-model="addHomeWork.knowledge">-->
            <!--              <el-option label="不使用" value="1"></el-option>-->
            <!--              <el-option label="署名(CC-BY)" value="2"></el-option>-->
            <!--              <el-option label="署名-相同方式共享(CC-BY-SA)" value="3"></el-option>-->
            <!--              <el-option label="署名-非商业化(CC-BY-NC)" value="4"></el-option>-->
            <!--              <el-option label="署名-禁止演绎(CC-BY-ND)" value="5"></el-option>-->
            <!--              <el-option label="署名-非商业-禁止演绎(CC-BY-NC-ND)" value="6"></el-option>-->
            <!--              <el-option label="署名-非商业-相同方式共享(CC-BY-NC-SA)" value="7"></el-option>-->
            <!--            </el-select>-->
            <el-select v-model="addHomeWorkForm.knowledge" @change="getItem(addHomeWorkForm.knowledge)">
              <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <i class="el-icon-wenhao tip"></i>
          </el-form-item>
        </div>
        <div class="option">
          <div class="apply">
            <el-form-item label="应用环节" :label-width="formLabelWidth1" prop="apply">
              <el-select v-model="addHomeWorkForm.apply" multiple placeholder="请选择">
                <el-option
                    v-for="item in options2"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="page">
            <el-form-item label="所属章节" :label-width="formLabelWidth1" prop="page">
              <el-select v-model="addHomeWorkForm.page" clearable placeholder="请选择">
                <el-option
                    v-for="item in option3"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div class="more">
          <div class="time">
            <el-form-item label="发布时间" :label-width="formLabelWidth2" prop="issueTime" class="is-required"
                          :rules="addHomeWorkRules.issueTime">
              <el-date-picker
                  v-model="addHomeWorkForm.issueTime"
                  type="datetime"
                  placeholder="选择日期时间"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  default-time="12:00:00">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="截止时间" :label-width="formLabelWidth2" prop="overTime" class="is-required"
                          :rules="addHomeWorkRules.overTime"
                          style="margin-left: 20px;">
              <el-date-picker
                  v-model="addHomeWorkForm.overTime"
                  type="datetime"
                  placeholder="选择日期时间"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  default-time="12:00:00">
              </el-date-picker>
            </el-form-item>
          </div>
          <div class="submit-work">
            <span class="title"><i class="red-star">*</i>作业提交格式</span>
            <el-radio-group class="radio" v-model="addHomeWorkForm.workFormat">
              <el-radio :label="3">所有格式(支持文档、图片、音视频等共80种格式)</el-radio>
              <el-radio :label="6">查看文档格式(支持doc、docx、pdf格式，系统可以对学生提交的作业自动查重)</el-radio>
              <el-radio :label="9">限制学生文档格式(指定学生的文档提交格式)</el-radio>
            </el-radio-group>
            <div class="block" v-show="addHomeWorkForm.workFormat === 9">
              <el-cascader
                  ref="variousVideo"
                  v-model="restrictFormat"
                  :options="options"
                  :props="{ multiple: true }"
                  collapse-tags
                  clearable></el-cascader>
            </div>
            <!--            <div class="block">-->
            <!--              <span class="demonstration">折叠展示Tag</span>-->
            <!--              <el-cascader-->
            <!--                  :options="options"-->
            <!--                  :props="props"-->
            <!--                  clearable></el-cascader>-->
            <!--            </div>-->
          </div>
          <div class="sore">
            <el-form-item label="总分" :label-width="'89px'" prop="sore" class="is-required">
              <el-input clearable v-model="addHomeWorkForm.sore" type="number" oninput="if(value<0)value=0"></el-input>
            </el-form-item>
            <el-switch
                v-model="ifOverTime"
                active-text="若超时，禁止提交" class="switch">
            </el-switch>
          </div>
          <div class="duplicate-checking">
            <el-switch
                v-model="duplicateCheck"
                active-text="进行查重" class="switch">
            </el-switch>
            <div class="check" v-show="duplicateCheck">
              <span class="title">查重警戒线</span>
              <el-input class="input" v-model="addHomeWorkForm.duplicateCheck"></el-input>
              <span class="title">%</span>
              <el-switch
                  v-model="repulse"
                  active-text="自动打回" class="switch">
              </el-switch>
              <div class="over" v-show="repulse">
                <span class="title ">重复率超过</span>
                <el-input class="input" v-model="addHomeWorkForm.repetitiveRate"></el-input>
                <span class="title">% 自动打回</span>
              </div>
            </div>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAdd()">取 消</el-button>
        <el-button type="primary" @click="submitAddForm('addHomeWorkForm')">确 定</el-button>
      </div>
    </el-dialog>
    <div class="no-homework" v-show="homeWork.length === 0"></div>
    <div class="show-homework" v-show="homeWork.length !== 0">
      <ul class="homework-list">
        <li v-for="(item,index) in this.homeWork" :key="index" class="item">
          <div class="card-box">
            <div class="left">
              <img src="../../assets/img/homework/pen.png" alt="图标">
              <div class="name">
                <span class="">作业</span>
              </div>
            </div>
            <div class="base">
              <div class="base-left">
                <h6 class="title">{{ item.workTitle }}</h6>
                <div class="status">
                  <span>提交截止时间：{{ item.overTime }}</span>
                  <div class="divide"></div>
                  <span>{{ item.workType }}</span>
                  <!--                  <div v-for="(it,index) in item.apply" :key="index">-->
                  <!--                  <div class="divide"></div>-->
                  <!--                  <span>{{it}}</span>-->
                  <!--                  </div>-->
                </div>
              </div>
              <div class="base-right" v-if="role === 'teacher'" @click="submitWork(item)">
                <div class="learning-situation">
                  <span class="item-info">
                    <i class="font-color">{{ item.approvedStudent }}</i>
                    <i class="font-text">已批完</i>
                  </span>
                  <span class="item-info">
                    <i class="font-color">{{ item.unapprovedStudent }}</i>
                    <i class="font-text">未批完</i>
                  </span>
                  <span class="item-info">
                    <i class="font-color">{{ item.unSubmitStudent }}</i>
                    <i class="font-text">未交</i>
                  </span>
                </div>
                <el-dropdown trigger="click">
                  <div class="but-more">
                      <span>
                        <i class="el-icon-gengduo high-light" style="font-size: 26px;"></i>
                        <i class="text">更多</i>
                      </span>
                  </div>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>编辑</el-dropdown-item>
                    <el-dropdown-item>移动到章节</el-dropdown-item>
                    <el-dropdown-item>保存到备课区</el-dropdown-item>
                    <el-dropdown-item>删除</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
              <div class="base-right" v-else>
                <el-button type="primary" v-show="item.state === 2" @click="submitWork(item)">提交作业</el-button>
                <el-button type="primary" v-show="item.state !== 2">已提交</el-button>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {Editor, Toolbar} from "@wangeditor/editor-for-vue";
import {mapState} from "vuex";

export default {


  components: {Editor, Toolbar},
  data() {
    const validateWorkTitle = (rule, value, callback) => {
      if (value === '') {
        this.$message.error("请输入作业名称！")
        callback()
      } else {
        callback()
      }
    }

    const validateIssueTime = (rule, value, callback) => {
      if (value === '') {
        this.$message.error("请输入开始时间！")
        callback()
      } else {
        callback()
      }
    }

    const validateOverTime = (rule, value, callback) => {
      if (value === '') {
        this.$message.error("请输入截止时间！")
        callback()
      } else {
        callback()
      }
    }
    return {
      role: '',
      homeWork: [],
      restrictFormat: '',
      addHomeWorkVisible: false,
      addHomeWorkForm: {
        workTitle: '',
        workType: '个人作业',
        activity: '作业',
        knowledge: '不使用',
        apply: '',
        page: '',
        issueTime: '',
        overTime: '',
        workFormat: 3,
        sore: '0',
        duplicateCheck: '30',
        repetitiveRate: '30'
      },
      addHomeWorkRules: {
        workTitle: {validator: validateWorkTitle, trigger: 'blur'},
        issueTime: {validator: validateIssueTime, trigger: 'blur'},
        overTime: {validator: validateOverTime, trigger: 'blur'}
      },
      formLabelWidth: '120px',
      formLabelWidth1: '147px',
      formLabelWidth2: '126px',
      editor: null,
      html: '',
      toolbarConfig: {},
      editorConfig: {placeholder: '请输入内容...'},
      mode: 'default',
      options1: [{
        value: '不使用',
        label: '不使用'
      }, {
        value: '署名(CC-BY)',
        label: '署名(CC-BY)'
      }, {
        value: '署名-相同方式共享(CC-BY-SA)',
        label: '署名-相同方式共享(CC-BY-SA)'
      }, {
        value: '署名-非商业化(CC-BY-NC)',
        label: '署名-非商业化(CC-BY-NC)'
      }, {
        value: '署名-禁止演绎(CC-BY-ND)',
        label: '署名-禁止演绎(CC-BY-ND)'
      }, {
        value: '署名-非商业-禁止演绎(CC-BY-NC-ND)',
        label: '署名-非商业-禁止演绎(CC-BY-NC-ND)'
      }, {
        value: '署名-非商业-相同方式共享(CC-BY-NC-SA)',
        label: '署名-非商业-相同方式共享(CC-BY-NC-SA)'
      }],
      options2: [{
        value: '课前',
        label: '课前'
      }, {
        value: '课中',
        label: '课中'
      }, {
        value: '课后',
        label: '课后'
      }, {
        value: '期中',
        label: '期中'
      }, {
        value: '期末',
        label: '期末'
      }],
      option3: [
        {
          value: '第一章节',
          label: '第一章节'
        }, {
          value: '第二章节',
          label: '第二章节'
        }, {
          value: '第三章节',
          label: '第三章节'
        }, {
          value: '第四章节',
          label: '第四章节'
        }, {
          value: '第五章节',
          label: '第五章节'
        }
      ],
      options: [{
        value: '视频格式',
        label: '视频格式',
        children: [{
          value: 'MP4',
          label: 'mp4',
        }, {
          value: 'flv',
          label: 'flv',
        }, {
          value: 'mov',
          label: 'mov',
        }]
      }, {
        value: '音频格式',
        label: '音频格式',
        children: [{
          value: 'mp3',
          label: 'mp3',
        }, {
          value: 'wma',
          label: 'wma',
        }]
      }, {
        value: '图片格式',
        label: '图片格式',
        children: [{
          value: 'jpg',
          label: 'jpg'
        }, {
          value: 'jpeg',
          label: 'jpeg'
        },{
          value: 'png',
          label: 'png'
        }]
      }],
      ifOverTime: false,
      variousVideo: false,
      duplicateCheck: false,
      repulse: false,
      unSubmitStudent: [],
      unapprovedStudent: [],
      approvedStudent: [],
      homeworkState: []
    }
  },
  methods: {
    addHomeWork() {
      this.addHomeWorkVisible = true
    },

    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    getItem(obj) {
      console.log(obj);
      this.$forceUpdate()
    },
    submitAddForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.addHomeWorkForm)
          this.request.post("/creatHomeWork", {
            code: this.courseCode,
            workTitle: this.addHomeWorkForm.workTitle,
            workType: this.addHomeWorkForm.workType,
            workOther: this.editor.getText(),
            activity: this.addHomeWorkForm.activity,
            knowledge: this.addHomeWorkForm.knowledge,
            apply: JSON.stringify(this.addHomeWorkForm.apply),
            page: this.addHomeWorkForm.page,
            issueTime: this.addHomeWorkForm.issueTime,
            overTime: this.addHomeWorkForm.overTime,
            workFormat: this.addHomeWorkForm.workFormat,
            sore: this.addHomeWorkForm.sore,
            duplicateCheck: this.addHomeWorkForm.duplicateCheck,
            repetitiveRate: this.addHomeWorkForm.repetitiveRate,
            restrictFormat: JSON.stringify(this.restrictFormat),
          }).then((res) => {
            if (res === "创建作业成功") {
              this.$message.success(res)
              this.addHomeWorkVisible = false
              this.getWork()
            } else {
              this.$message.error(res)
            }
          })
        }
      })
    },
    cancelAdd() {
      this.addHomeWorkVisible = false;
    },
    getWork() {
      if (this.role === "teacher") {
        this.request.post('/getHomeWork', {
          code: this.courseCode,
          username: localStorage.getItem("username")
        }).then((res) => {
          if (res == null) {
            this.$message.error("获取作业失败！")
          } else {
            this.homeWork = res.homeWorkList
          }
        })
      } else if (this.role === "student") {
        this.request.post('/getHomeWork', {
          code: this.courseCode,
          username: localStorage.getItem("username")
        }).then((res) => {
          console.log(res)
          if (res == null) {
            this.$message.error("获取作业失败！")
          } else {
            this.homeWork = res.homeWorkList
            this.homeworkState = res.homeWorkStates
            this.homeWork.forEach(item1 => {
              const item2 = this.homeworkState.find(obj => obj.homeworkId === item1.uuid)
              if (item2) {
                item1.state = item2.state
              }
            })
          }
        })
      }

    },
    submitWork(item) {
      this.$store.commit("courseInformation/setHomeWork", {
        homework: item
      })
      this.$router.push("/submitWork")
    },

  },
  mounted() {
    this.role = localStorage.getItem("role")
    this.getWork()
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },
  watch: {
    workRadio(newValue) {
      if (newValue === 9) {
        this.variousVideo = true
      } else {
        this.variousVideo = false
      }
    },
    restrictFormat(newValue) {
      console.log(newValue)
    },
  },
  computed: {
    timeDefault() {
      let date = new Date();
      return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + (date.getDate());
    },
    ...mapState({courseCode: state => state.courseInformation.course.courseCode}),
    ...mapState({courseNumber: state => state.courseInformation.course.courseNumber})
  },
}
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style scoped>
.homework-head {
  align-items: center;
  margin-top: 5px;
  display: flex;
  justify-content: space-between;
}

.add-homework button {
  border: none;
  font-size: 20px;
  padding: 12px 23px;
  border-radius: 23px;
  background-color: #00CA90;
}

::v-deep .el-dialog__header {
  padding: 20px 20px 20px;
  border-bottom: 1px solid #dadce0;
}

::v-deep .el-dialog {
  width: 55%;
}

::v-deep.el-dialog__title {
  font-weight: 600;
  font-size: 20px;
}

::v-deep .el-dialog__headerbtn {
  top: 21px;
  font-size: 22px;
}

.workType {
  padding-top: 8px;
  margin-bottom: 24px;
  font-size: 19px;
}

::v-deep .el-radio {
  color: #606266;
  cursor: pointer;
  margin-right: 30px;
  height: 26px;
  margin-bottom: 10px;
}

::v-deep .el-radio__label {
  font-size: 19px;
}

::v-deep .el-radio__inner {
  width: 16px;
  height: 16px;
}

::v-deep .el-radio__inner::after {
  width: 6px;
  height: 6px;
}

.vip-type {
  color: red;
  font-size: 18px;
  margin-left: 5px;
  padding-top: 5px;
}

::v-deep .el-form-item__label {
  line-height: 50px;
  font-size: 20px;
  text-align: left;
}

.activity {
  margin-top: 20px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
}

.active {
  display: flex;
  align-items: center;
}

.active .label {
  font-size: 20px;
  width: 220px;
  line-height: 40px;
  float: left;
}

::v-deep .el-input__inner {
  font-size: 20px;
  height: 50px;
}

.tip {
  margin-left: 10px;
  font-size: 30px;
}

.option {
  display: flex;
}

.page {
  margin-left: 20px;
}

::v-deep .el-switch__label {
  color: #FF6000;
}

::v-deep .el-switch__core:after {
  width: 20px;
  height: 20px;
}

::v-deep .el-switch.is-checked .el-switch__core::after {
  margin-left: -22px;
}

::v-deep .el-switch__core {
  border-radius: 15px;
  width: 48px !important;
  height: 25px;
}

::v-deep .el-switch__label * {
  font-size: 20px;
}

::v-deep .el-switch__label--right {
  margin-left: 25px;
}

.issue {
  margin-bottom: 30px;
}

.more {
  background: #f8f9fa;
  border-radius: 4px;
  padding: 24px;
}

.time {
  padding-left: 21px;
  display: flex;
}

.submit-work {
  margin-bottom: 20px;
}

.submit-work .title {
  display: block;
  font-size: 20px;
  margin-left: 19px;
  margin-bottom: 20px;
}

.red-star {
  color: #eb5050 !important;
  margin-right: 5px !important;
}

.submit-work .radio {
  margin-left: 23px;
  display: flex;
  font-size: 0;
  flex-direction: column;
}

::v-deep .el-checkbox__inner {
  width: 20px;
  height: 20px;
}

::v-deep .el-checkbox__inner::after {
  height: 10px;
  left: 6px;
  top: 1px;
  width: 5px;
}

::v-deep .el-cascader-menu__wrap {
  height: 260px;
}

::v-deep .el-cascader-menu__list {
  padding: 16px 0;
}

::v-deep .el-cascader-menu {
  min-width: 235px;
}

::v-deep .el-cascader-panel {
  font-size: 19px;
}

::v-deep .el-tag {
  font-size: 17px;
}

::v-deep .el-tag--small {
  height: 36px;
}

.block {
  margin-left: 48px;
}

.sore {
  display: flex;
}

.sore .switch {
  padding-top: 24px;
  padding-left: 20px;
}

.sore .switch ::v-deep .el-switch__label * {
  color: black;
}

.sore ::v-deep .el-form-item__label {
  text-align: right;
}

.duplicate-checking {
  padding-left: 27px;
}

.duplicate-checking .switch {
  margin-top: 15px;
  margin-bottom: 20px;
}

.duplicate-checking .switch ::v-deep .el-switch__label * {
  color: black;
}

.check {
  display: flex;
}

.check .title {
  font-size: 20px;
  padding-top: 10px;
  padding-right: 10px;
}

.check .over {
  margin-left: 30px;
  display: flex;
}

.check .over .input {
  width: 20%;
}

.duplicate-checking .input {
  width: 10%;
}

.homework-list {
  padding-top: 14px;
  border: 1px solid #e7ebf0;
  border-radius: 8px;
  margin-top: 20px;
  margin-bottom: 10px;
}

.homework-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 16px 0 16px;
  background: #fff;
  overflow: hidden;
}

.card-box {
  width: 100%;
  background: #fff;
  display: flex;
  position: relative;
}

.card-box .left {
  flex-direction: column;
  min-width: 92px;
  margin-right: 16px;
  font-size: 18px;
  display: flex;
  align-items: center;
}

.card-box .left img {
  height: 50px;
  max-width: 50px;
  margin-bottom: 15px;
  border: none;
}

.base {
  width: 100%;
  border-bottom: 1px solid #eee;
  padding: 0 0 4px;
  font-size: 14px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.base .title {
  font-weight: 400;
  font-size: 20px;
  margin-bottom: 12px;
  max-width: 500px;
  cursor: pointer;
  color: #212121;
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  white-space: normal;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.base .status {
  color: #5f6368;
  font-size: 16px;
}

.status span {
  outline: none;
}

.status .divide {
  display: inline-block;
  width: 1px;
  height: 1em;
  margin: 0 8px;
  vertical-align: middle;
  position: relative;
  background-color: #dadce0;
}

.base-right {
  margin-top: 7px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  font-size: 12px;
}

.learning-situation {
  display: flex;
  justify-content: center;
  border-right: 1px solid #e7ebf0;
}

.item-info {
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  min-width: 80px;
}

.item-info i {
  display: block;
  font-size: 22px;
}

.item-info .font-color {
  color: #4285f4;
}

.item-info .font-text {
  font-size: 15px;
  color: #202124;
}

i {
  font-style: normal;
}

span {
  outline: none;
}

.base .but-more {
  display: inline-block;
  position: relative;
  color: #606266;
  font-size: 16px;
}

.base .but-more span {
  text-align: center;
  cursor: pointer;
  display: block;
  min-width: 72px;
}

.base .but-more .text {
  text-align: center;
  cursor: pointer;
  display: block;
  min-width: 80px;
}

.but-more .high-light:hover {
  color: #4285f4;
}

.plane {
  display: flex;
  border-right: 1px solid #e7ebf0;
}

.plane-bt {
  text-align: center;
  cursor: pointer;
  display: block;
  min-width: 72px;
  color: #4285f4;
  background: 0 0;
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 4px;
  border: none;
}

.plane-bt .text {
  padding-top: 4px;
  display: block;
  color: #202124;
}
</style>
